<template>
	<view>
		<view class="index_head">
			<view class="page_title">
				<view class="custom-navbar">
					<uni-icons type="left" size="20" color="#1A1B1D"@click="navigateBack"></uni-icons>
				</view>
				<view class="lijizhifu">
					立即支付
				</view>
			</view>
			
			<view class="car_message">
				<view class="car_item">
					<view class="car_items">
						车牌号:
					</view>
					<view class="car_num">
						京A 123456A
					</view>
				</view>
				<view class="car_item">
					<view class="car_items">
						停车场:
					</view>
					<view class="car_stop">
						好又多广场B2
					</view>
				</view>
				<view class="car_item">
					<view class="car_items">
						停车场长:
					</view>
					<view class="car_stop">
						好又多广场B2好又多广
					</view>
				</view>
				<view class="car_item">
					<view class="car_items">
						停车场长:
					</view>
					<view class="car_stop">
						好又多广场B2好又多广好又多广
					</view>
				</view>
			</view>
			<view class="carFee_message">
				<view class="stop_car">
					<view class="stop_item">
						<uni-icons type="right" size="12" color="#ABABAB"></uni-icons>
						停车时间
					</view>
					<view class="stop_time">
						2小时30分钟
					</view>
				</view>
				<view class="stop_car">
					<view class="stop_item">
						<uni-icons type="right" size="12" color="#ABABAB"></uni-icons>
						优惠券
					</view>
					<view class="stop_pavour">
						暂无可使用的优惠券
					</view>
				</view>
				<view class="stop_car">
					<view class="stop_item">
						<uni-icons type="right" size="12" color="#ABABAB"></uni-icons>
						缴费总额
					</view>
					<view class="stop_money">
						￥12
					</view>
				</view>
				<view class="hr-line"></view>
				<view class="stop_reality">
					<view class="stop_realitys">
						实付款:
					</view>
					<view class="stop_realitymoney">
						￥12
					</view>
				</view>
			</view>
			<view class="index_footer">
				<view class="stop_reality">
					<view class="stop_realitys">
						实付款:
					</view>
					<view class="stop_realitymoney">
						￥12
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			 navigateBack() {
			      uni.navigateBack({
			        delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
			      });
			    }
		}
	}
</script>

<style lang="scss">
.index_head{
	
		padding: 68upx 26upx 300upx 26upx;
		.page_title{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.lijizhifu{
				text-align: center;
			}
			.custom-navbar {
				position: absolute;
				left: 0px;
			  display: flex;
			  align-items: center;
			  padding: 10px;
			}
			.back-btn {
			  margin-right: auto;
			  font-size: 16px;
			  color: #000;
			  cursor: pointer;
			}
			font-size: 34upx;
			color: $font-color-block;
			// text-align: center;
			// line-height: 34upx;
		}
		background: linear-gradient(to bottom,rgb(248,238,228),#F7F8FA );
		.car_message{
			width: 686upx;
			height: 280upx;
			background: white;
			margin-top: 40upx;
			font-size: 28upx;
			display: flex;
			flex-direction: column;
			padding: 10upx 0 0 0;
			
			.car_item{
				margin-left: 28upx;
				display: flex;
				color: #000000;
				line-height: 64upx;
				
				.car_items{
					width: 120upx;
					color: #666666;
				}
			}
		}
		.carFee_message{
			width: 686upx;
			height: 348upx;
			background: white;
			margin-top: 20upx;
			font-size: 28upx;
			padding: 0upx 28upx 0;
			color: #000000;
			.hr-line{
				border-top: 1upx solid #E6E6E6 ; /* 设置线的颜色和宽度 */
				  margin: 42upx 0 0 0; /* 设置线的上下外边距 */
			}
			.stop_reality{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-top: 21upx;
			}
			.stop_realitys{
				font-size: 28upx;
				color: #999999;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #999999;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding-right: 20upx;
			}
			.stop_realitymoney{
				font-size: 36upx;
				color: #DE0000;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #DE0000;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.stop_car{
				display: flex;
				justify-content: space-between;
				padding-top: 42upx;
				.stop_item{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.stop_time{
					color: #DE0000;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-style: normal;
					text-transform: none;
				}
				.stop_pavour{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.stop_money{
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
		.index_footer{
			width: 700upx;
			height: 98upx;
			background: white;
			position: fixed;
			bottom: 0;
			.stop_reality{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-top: 21upx;
			}
			.stop_realitys{
				font-size: 28upx;
				color: #999999;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #999999;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding-right: 20upx;
			}
			.stop_realitymoney{
				font-size: 36upx;
				color: #DE0000;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #DE0000;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>
